/**Basic rules**/
img {max-width: 100%;}
h3 {color: #212529;}
a, a:visited, a:hover {color:#007bff; text-decoration: none;}
a.btn {color:#fff;}
body {color: #555;};
.imagepreview {min-width:200px;min-height:200px;background-size: contain;background-repeat: no-repeat;}
/** LOADER **/

.unilogo {
    position: absolute;
    left: 50%;
    top: 15%;
    margin: 0px auto;
    z-index: 1;
    transform: translate(-50%);
    width: 250px;
}
.sk-cube-grid {
    width: 50px;
    height: 50px;
    margin: 0px auto;
    z-index: 1;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%);
}

.sk-cube-grid .sk-cube {
    width: 30%;
    height: 30%;
    margin: 1.6%;
    background-color: #2c7ac8;
    float: left;
    -webkit-animation: sk-cubeGridScaleDelay 1s infinite ease-in-out;
    animation: sk-cubeGridScaleDelay 1s infinite ease-in-out;
    border-radius: 10px;
}

.sk-cube-grid .sk-cube1 {
    -webkit-animation-delay: 0.2s;
    animation-delay: 0.2s;
}

.sk-cube-grid .sk-cube2 {
    -webkit-animation-delay: 0.3s;
    animation-delay: 0.3s;
}

.sk-cube-grid .sk-cube3 {
    -webkit-animation-delay: 0.4s;
    animation-delay: 0.4s;
}

.sk-cube-grid .sk-cube4 {
    -webkit-animation-delay: 0.1s;
    animation-delay: 0.1s;
}

.sk-cube-grid .sk-cube5 {
    -webkit-animation-delay: 0.2s;
    animation-delay: 0.2s;
}

.sk-cube-grid .sk-cube6 {
    -webkit-animation-delay: 0.3s;
    animation-delay: 0.3s;
}

.sk-cube-grid .sk-cube7 {
    -webkit-animation-delay: 0s;
    animation-delay: 0s;
}

.sk-cube-grid .sk-cube8 {
    -webkit-animation-delay: 0.1s;
    animation-delay: 0.1s;
}

.sk-cube-grid .sk-cube9 {
    -webkit-animation-delay: 0.2s;
    animation-delay: 0.2s;
}
.closebox {
    text-align: center;
    background: #2c7ac8;
    width: 30px;
    font-size: 22px;
    border-radius: 100%;
    margin-left: 10px;
    margin-top: 10px;
    color: white;
    cursor:pointer;
}
.loader-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgb(165 150 150 / 92%);
    /* change if the mask should have another color then white */
    opacity: 1;
    z-index: 11111;
    /* makes sure it stays on top */
    height: 100%;
    overflow: hidden;
}
.modalmask {
    position:fixed;
    min-height: 100%;
    min-width: 100%;
    background:#000000aa;
    top: 0;
    left: 0;
    z-index: 1000;
}
.modalbox{position:fixed;width: 60%;z-index: 1001;background: white;padding: 30px;overflow-y: auto;max-height: 90%;border-radius: 8px;left: 50%;top: 50%;transform: translate(-50%, -50%);}
.modal-close{
    border: 2px solid;
    height: 25px;
    width: 25px;
    display: block;
    text-align: center;
    border-radius: 100%;
    font-weight: 900;
    line-height: 21px;
    cursor: pointer;
    position: relative;
    top: -25px;
    left: -25px;
};

@-webkit-keyframes sk-cubeGridScaleDelay {
    0%,
    70%,
    100% {
        -webkit-transform: scale3D(1, 1, 1);
        transform: scale3D(1, 1, 1);
    }
    35% {
        -webkit-transform: scale3D(0, 0, 1);
        transform: scale3D(0, 0, 1);
    }
}

@keyframes sk-cubeGridScaleDelay {
    0%,
    70%,
    100% {
        -webkit-transform: scale3D(1, 1, 1);
        transform: scale3D(1, 1, 1);
    }
    35% {
        -webkit-transform: scale3D(0, 0, 1);
        transform: scale3D(0, 0, 1);
    }
}


/** BUTTONS **/
.btn-primary, a.button{
    color: #fff;
    background-color: #007bff;
    border-color: #007bff;
    background-image: none;
    }
/** HEADER RULES **/
header{background: #333;}
.search-form{}
.search-form input.form-control{width:90%;}
.logo_container{}
.logo{}
.logo img{max-width: 200px; margin-left:25px}

/**BOOTSTRAP OVERRIDES**/
.list-group-item{
    text-align:center;
    padding:.75rem 0.25rem;
}
.card {margin-bottom:15px;}
/** NAV RULES **/
.nav{

}
.nav-item{}
a.nav-link{color:white;}
.active .nav-link{color:#bec6ce;}

/** TOP LINKS **/
.modlinks li {display:inline-block; margin: 5px; color:white;}
.modlinks li a {color:white;}

/**Data Tables **/
.data_form {
    
}
.data_form table {font-size: 15px;}
.data_form table tr {border : 5px solid #f0f3f5}
.data_form table tr:last-child {border:0;}
.data_form table .imagepreview {max-width: 150px;min-width: auto;min-height: 100px;background-size: cover;}

.function-box {border: 6px solid #f0f3f5;margin: 1%;max-width: 48%;padding: 15px;}
/** FILTER BOXES **/
.togglebox {}
.togglebox > a > h4:before {content:'-';}
.togglebox > a.inactive > h4:before {content:'+';}
.togglebox > div {display:none;}
.plusminus { height:40px; width:40px; display:block;}
.plusminus:before {content: '+'; font-size:40px; height:40px; width:40px; display:block; text-decoration: none; line-height: 80px; 
    text-align: center;}
.plusminus.active:before{content: '-';}
.dropdowna:after {font-family: "Font Awesome 5 Free";content: " \f107";width:20px;height:20px;font-weight: 900;}
.dropdowna.active:after{content:" \f106";}
/**Pagination **/
.pagination{text-align:left;float: left;}

/** Content Rules **/
.contentheading {margin-top: 50px;color: #212529;}
.subheading {display: inline-block;
    font-weight: bold;
    font-size:1rem;
    color:#212529;
    margin-top:10px;
    border-bottom: 4px solid lightblue;}
.imagepreview  {min-width: 100px;min-height: 100px;background-size: cover; width:100%;}
#broker_edit .imagepreview {background-size:contain; background-repeat: no-repeat; min-width:150px; min-height: 150px;}
/**Clients **/
.contact, .note {
    background: #eee;
    margin:15px 0;
    padding:15px;
}

/* Tools */
.results_panel {
    margin: 10px;
    background: #f1f1f1;
    padding: 10px 20px;
    border-radius: 10px;
    border: 2px solid gainsboro;
}

.progress {
    height: 2rem;
        background: #bbb;
}
.progress-bar {overflow:visible; transition: width 1s ease;}