@font-face {
    font-family: 'Escuedro';
    src: url("/public/fonts/esqadero_regular.ttf"); /* File to be stored at your site */
}

@font-face {
    font-family: 'kelson';
    src: url("/public/fonts/kelson/kelson_sans_normal.ttf"),url("/public/css/fonts/kelson/kelson_sans_normal.otf"); /* File to be stored at your site */
}

a:link, a:visited, a:hover, a:active
{
    text-decoration: none;
    color: #212529;
}

section,div{
    box-sizing: border-box;
}

body{
    margin:0px;
    padding:0px;
    background: #f1f3f6;
    background:#E9F1FA;
    background:linear-gradient(to bottom, #fff ,#E9F1FA ,#E9F1FA , #E9F1FA);
    background:linear-gradient(to bottom, #fff ,rgb(246,246,248) ,rgb(239,241,243) , rgb(237,238,242));
    background-size: 100% auto;
    background-repeat: no-repeat;
}



div,p,nav,ul,li,a,input{
    font-family: 'kelson','Calibri';
    /** font-family: 'Calibri'; */
    box-sizing: border-box;
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active{
    -webkit-box-shadow: 0 0 0 30px white inset !important;
}

/* custom scrollbar */
::-webkit-scrollbar {
    width: 20px;
}

::-webkit-scrollbar-track {
    background-color: transparent;
}

::-webkit-scrollbar-thumb {
    background-color: rgba(0,0,0,0.3);
    border-radius: 20px;
    border: 6px solid transparent;
    background-clip: content-box;
}

::-webkit-scrollbar-thumb:hover {
    background-color: rgba(0,0,0,0.7);
    cursor:pointer;
}





.content-context-menu{
    display: none;
}


.platform-container{
    margin-top: 125px;
    width:100%;
    display: table;
}

.platform-container.static-content{
    height: calc( 100vh - 125px );
    display: block;
    /* overflow-y: scroll; */
}

#system-footer{
    text-align: center;
}

/* Contents */

.base-content{
    padding:.5em;
    color:#333;
    font-size: 10pt;
}

.base-content div.base-content-container{
    background:white;
    border: 1px solid rgba(0,0,0,.125);
    padding:2em;
    border-radius: .5em;
    background: rgb(255,255,255);
    background: linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(250,250,250,1) 100%);
    display: table;
    width: 100%;
}

.base-content div.transperent-container{
    background:transparent;
    border: 0px;
}

.base-content div.base-content-container.no-top-padding-container{
    padding-top:0px;
}

.base-content div.base-content-container header.base-content-header p.title{
    padding: 0px .5em 1.5em .0px;
    margin:0px;
    font-weight: bold;
}

.base-content div.base-content-container header.base-content-header p.description{
    padding:0px .5em .5em .0px;
    margin:0px;
    color:#999;
    color: #646464;
}

.base-content div.base-content-container header.center-text-header p.title,
.base-content div.base-content-container header.center-text-header p.description{
    text-align: center;
}












/**
    content context menu
*/
.content-context-menu{
    display: none;
}

.content-context-menu{
    background:white;
    position: absolute;
    z-index: 2000;
    border-radius: .5em;
    padding:.5em;
    border: 3px solid darkgreen;
    margin:0px;
    cursor:zoom-out;
    box-shadow: 0px 0px 5px 2px #ddd;
}

.content-context-menu ul{
    display:table;
    padding:0px;
    margin:0px;
}

.content-context-menu ul li{
    list-style:none;
    padding:.0em;
    margin:0px;
    padding:.2em .5em;
    border-radius: .3em;
    text-align: center;
}

.content-context-menu ul li:hover{
    background:darkgreen ;
    color:white;
}

.content-context-menu .content-name{
    font-size:8pt;
}

/* System chat messages*/


#chat-messages-bar{
    background:red;
    position: fixed;
    top: 60px;
    right: 1em;
    border-radius: .3em;
    padding: 1em;
    box-sizing: border-box;
    z-index: 2000;
    display: none;
}

#chat-messages-bar:after{
    content: "";
    position: fixed;
    width: 0px;
    height: 0px;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 10px solid red;
    top:50px;
    right:65px
}


#chat-messages-bar h4{
    color:white;
    margin:0px 0px 1em 0px;
}

#chat-messages-bar .message-bar-item{
    color:white;
    margin:0px;
    padding:.5em 0px;
}


/* Messages */

#system-message{
    position:fixed;
    top:0px;
    left:0px;
    padding: 5em 0px;
    margin: 0px;
    width: calc(100% - 0em);
    background-color: rgba(255, 255, 255, 0.3);
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
    display:table;
    box-shadow: 0px 2px 6px rgb(0 4 68 / 20%);

}



#system-message p{
    display: table;
    margin:auto;
    padding:1em 3em;
    border-radius: .3em;
    text-align:center;
    width:50%;
}

#system-message.system-message-success p{
    background:green;
    color:white;
}

#system-message.system-message-error p{
    background:darkred;
    color:white;
}

#system-message.system-message-information p{
    background:orange;
    color:white;
}

/* Preloaders */

.preloader-base-spiner .icon.spiner-active{
    mask: none !important;
    -webkit-mask-image: none !important;
    background-color: transparent !important;
    background-image: url(/public/images/backgrounds/preloader/base_circle_loader.gif) !important;
    background-size: auto 1000% !important;
    background-repeat: no-repeat !important;
    background-position: center 50% !important;
    color: transparent !important;
}

.preloader-circle-spiner .spiner-active,
.preloader-circle-spiner.spiner-active,
.preloader-circle-spiner .spiner-active div{
    background-image: url('/public/images/backgrounds/preloader/white_circle_loader.gif') !important;
    background-size: auto 70% !important;
    background-repeat: no-repeat !important;
    background-position: center 50% !important;
    color: transparent !important;
}

.preloader-circle-spiner.spiner-active span{
    color: transparent !important;
}





/*
.form-content .form-container .form-default-input.form-submit .input-container div.standart-input.spiner-active,
.form-content .form-container a.standart-input.spiner-active,
.form-content .form-container .form-default-input.form-submit .input-container input.spiner-active,
.form-default-input input.spiner-active{
}*/




@media only screen and (max-width: 900px) {




    #system-message p{
        width:75%;
    }

    .platform-container {
        margin-top: 70px
    }

    .platform-container.static-content {
        height: calc( 100vh - 70px );
    }

    #main-buttons .button-item {
        height: 160px !important;
    }

    #main-buttons .button-item .thumbnail-container {
        height: 125px !important;
    }

    .base-content div.base-content-container{
        padding:1em;
    }

    #system-footer {
        margin-top: 5em;
    }
}