.mainword {
    font-family: 'Asap Condensed', sans-serif;
    font-size: 250%;
    display: flex;
    justify-content: center;
}

.ds-in-line {
    display: inline-table;
}

.fw-small {
    font-size: small;
}



@media (min-height:500px) {
    .sizePanel {
        /*height: 79vh;*/
        height: 90vh;
    }

    .sizePanel2 {
        height: 72.69vh;
    }

    .sizeIMG {
        height: auto;
        max-height: 300px
    }

    .mt-logout{
        margin-top: 50vh;
    }

    .hidescrollbar::-webkit-scrollbar {
        display: none;
    }
    
    .hidescrollbar {
        -ms-overflow-style: none;
        scrollbar-width: none;
    }

    /*.carousel-item-width{
        width: 100%;
    }

    .carousel-inner-Size {*/
       /* display: flex;
        justify-content: center;*/
    /*}*/
}

@media (min-height:600px) {
    .sizePanel {
        /*height: 82vh;*/
        height: 91vh;
    }

    .sizePanel2 {
        height: 76.7vh;
    }

    .mt-logout {
        margin-top: 60vh;
    }
}

@media (min-height:700px) {
    .sizePanel {
        /*height: 83vh;*/
        height: 92vh;
    }

    .sizePanel2 {
        height: 78vh
    }
}

@media (min-height:800px) {
    .sizePanel {
        /*height: 85vh*/
        height: 93vh;
    }

    .sizePanel2 {
        height: 80vh
    }
}

@media (min-height:900px) {
    .sizePanel {
        /*height: 85vh;*/
        height: 94vh;
    }

    .sizePanel2 {
        height: 80vh
    }

    .hidescrollbar::-webkit-scrollbar {
        display:inherit;
    }

    .hidescrollbar {
        -ms-overflow-style: inherit;
        scrollbar-width: inherit;
    }
   
}

/*Media Width*/
@media (min-width:300px) {
    .carousel-item-width {
        width: 100%;
    }

    .carousel-inner-Size {
        /*display: flex;
        justify-content: space-around;*/
    }

    .text-overflow {
        white-space: nowrap;
        text-overflow: ellipsis;
        -o-text-overflow: ellipsis;
        -ms-text-overflow: ellipsis;
        overflow: hidden;
        /*width: 150px;*/
    }
}

@media (min-width:1000px) {
    .carousel-item-width {
        width: 50%;
    }

    .carousel-inner-Size {
        display: flex;
        justify-content: space-around;
    }
}

.button {
    display: block;
    /*margin: 10px;*/
    padding: 10px
}

button.button {
    width: calc(100% - 20px);
}

.leftcolumn {
    float: left;
    width: 50%;
    padding-right: 10px;
}

@media screen and (max-width: 300px) {
    .leftcolumn, .rightcolumn {
        width: 100%;
        padding: 0;
    }
}

.avatar {
    /*width: 110px;*/
    width: 100%;
    /*max-height: 250px;*/
    height: 100%;
}

.rightcolumn {
    float: left;
    width: 50%;
    padding-left: 10px;
}

.avatar:active {
    outline: none;
    border: none;
}

.avatar:focus {
    outline: 0;
}

.preformatted {
    white-space: nowrap;
}

.hiddencol {
    display: none;
}

.GridPager a,
.GridPager span {
    display: inline-block;
    padding: 0px 9px;
    margin-right: 4px;
    border-radius: 3px;
    border: solid 1px #c0c0c0;
    background: #e9e9e9;
    box-shadow: inset 0px 1px 0px rgba(255,255,255, .8), 0px 1px 3px rgba(0,0,0, .1);
    font-size: .875em;
    font-weight: bold;
    text-decoration: none;
    color: #717171;
    text-shadow: 0px 1px 0px rgba(255,255,255, 1);
}

.GridPager a {
    /*background-color: #f5f5f5;
            color: #969696;
            border: 1px solid #969696;*/
    background: #fcfcfd;
    box-shadow: inset 0px 0px 8px rgb(255 255 255 / 50%), 0px 1px 0px rgba(255,255,255, .8);
    color: #a7a7a7;
    text-shadow: 0px 0px 3px rgb(255 255 255 / 50%);
}

.GridPager span {
    /* background: #616161;
            box-shadow: inset 0px 0px 8px rgba(0,0,0, .5), 0px 1px 0px rgba(255,255,255, .8);
            color: #f0f0f0;
            text-shadow: 0px 0px 3px rgba(0,0,0, .5);*/
    background-color: #f5f5f5;
    color: #969696;
    border: 1px solid #969696;
}
.GridPager td {
    padding-top: 5px
}

.table-bordered > tbody > tr > th {
/*    border: 1px solid #e24e42;*/
}

.CssNumPaging a {
    padding: 5px;
    margin-left: 5px;
    margin-right: 5px;
    border-radius: 3px;
    border: solid 1px #c0c0c0;
    background: #e9e9e9;
    box-shadow: inset 3px 3px 3px rgba(255,255,255, .8), 3px 3px 3px rgba(0,0,0, .1);
    font-size: 12px;
    font-weight: bold;
    text-decoration: none;
    color: #717171;
    text-shadow: 0px 1px 0px rgba(255,255,255, 1);
    background-color: #f5f5f5;
    color: #969696;
    border: 1px solid #969696;
}

table.grid tr {
    border: 0px solid #e7eaed;
    border-width: 20px 0;
}


textarea:focus,
input[type="text"]:focus,
input[type="password"]:focus,
input[type="datetime"]:focus,
input[type="datetime-local"]:focus,
input[type="date"]:focus,
input[type="month"]:focus,
input[type="time"]:focus,
input[type="week"]:focus,
input[type="number"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="color"]:focus,
input[type="checkbox"]:focus,
input[type="button"]:focus,
input[type="submit"]:focus,
.uneditable-input:focus {
    /*border-color: rgb(235, 235, 239, 0.8);*/
    border-color: rgb(208, 110, 49, 0.6);
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px rgb(208, 110, 49, 0.6);
    outline: 0 none;
}

.text-template {
    color: #aa3339;
}

.text-template-2 {
    color: #ffb729;
}

.text-template-3 {
    color: #e48d2f;
}

.border-template {
    border-color: #e48d2f !important;
}

.text-template-topic {
    color: #7fa2ca;
}

.bg-template {
    background-color: #CC9216;
}

.bg-template-card {
    background: linear-gradient(to top right, #4e4e4e, #fdf5e5);
    background: -webkit-linear-gradient(to top right, #4e4e4e, #fdf5e5);
    background: -moz-linear-gradient(to top right, ##4e4e4e, #fdf5e5);
    background-repeat: no-repeat;
    background-position: center center;
    background-attachment: fixed;
    background-size: 100% 100%, auto;
}

.bg-template-2 {
    background-color: #FFB71B;
}

.bg-template-3 {
    background-color: #aa3339;
}

.bg-template-4 {
    background-color: #f09b31;
}

.bg-template-topic {
    /*background: linear-gradient(to bottom left, #CC9216, #7FA2CA);
    background: -webkit-linear-gradient(to bottom left, #CC9216, #7FA2CA);
    background: -moz-linear-gradient(to bottom left, #CC9216, #7FA2CA);*/
    background: linear-gradient(to bottom left, #aa3339, #ffb729);
    background: -webkit-linear-gradient(to bottom left, #aa3339, #ffb729);
    background: -moz-linear-gradient(to bottom left, #aa3339, #ffb729);
    background-repeat: no-repeat;
    background-position: center center;
    -o-background-size: 100% 100%, auto;
    -moz-background-size: 100% 100%, auto;
    -webkit-background-size: 100% 100%, auto;
    background-size: 100% 100%, auto;
}

.text-tem-success {
    color: #60a062 !important;
}

.border-tem-success {
    border-color: #60a062 !important;
}

.bg-tem-success {
    background-color: #60a062;
}

.text-tem-danger {
    color: #b80810d1 !important;
}

.border-tem-danger {
    border-color: #b80810d1 !important;
}

.bg-tem-danger {
    background-color: #b80810d1;
}

.text-tem-primary {
    color: #4c80bb;
}

.border-tem-primary {
    border-color: #4c80bb !important;
}

.border-tem-gray-400 {
    border-color: #d1d3e2 !important;
}

.bg-tem-primary {
    background-color: #4c80bb;
}

/* ----------------- Border -------------------*/
.border-left-primary {
    border-left: 0.35rem solid #4e73df !important;
}

.border-bottom-primary {
    border-bottom: 0.25rem solid #4e73df !important;
}

.border-left-secondary {
    border-left: 0.35rem solid #858796 !important;
}

.border-bottom-secondary {
    border-bottom: 0.25rem solid #858796 !important;
}

.border-left-success {
    border-left: 0.35rem solid #1cc88a !important;
}

.border-bottom-success {
    border-bottom: 0.25rem solid #1cc88a !important;
}

.border-left-info {
    border-left: 0.35rem solid #36b9cc !important;
}

.border-bottom-info {
    border-bottom: 0.25rem solid #36b9cc !important;
}

.border-left-warning {
    border-left: 0.35rem solid #f6c23e !important;
}

.border-bottom-warning {
    border-bottom: 0.25rem solid #f6c23e !important;
}

.border-left-danger {
    border-left: 0.25rem solid #e74a3b !important;
}

.border-bottom-danger {
    border-bottom: 0.25rem solid #e74a3b !important;
}

.border-left-light {
    border-left: 0.25rem solid #f8f9fc !important;
}

.border-bottom-light {
    border-bottom: 0.25rem solid #f8f9fc !important;
}

.border-left-dark {
    border-left: 0.25rem solid #5a5c69 !important;
}

.border-bottom-dark {
    border-bottom: 0.25rem solid #5a5c69 !important;
}

/* ----------------- Text-Gray -------------------*/
.text-gray-100 {
    color: #f8f9fc !important;
}

.text-gray-200 {
    color: #eaecf4 !important;
}

.text-gray-300 {
    color: #dddfeb !important;
}

.text-gray-400 {
    color: #d1d3e2 !important;
}

.text-gray-500 {
    color: #b7b9cc !important;
}

.text-gray-600 {
    color: #858796 !important;
}

.text-gray-700 {
    color: #6e707e !important;
}

.text-gray-800 {
    color: #5a5c69 !important;
}

.text-gray-900 {
    color: #3a3b45 !important;
}


/*-------------------------------------*/

.btn-topic {
    transition: all .5s ease;
    color: white;
    text-transform: uppercase;
    text-align: center;
    font-size: 17px;
    padding: 0.5rem 2rem;
    outline: none;
    border-radius: 2.5rem 0 0 2.5rem;
    margin-left: 1.5rem;
    background: linear-gradient(to bottom left, #aa3339, #ffb729);
    background: -webkit-linear-gradient(to bottom left, #aa3339, #ffb729);
    background: -moz-linear-gradient(to bottom left, #aa3339, #ffb729);
    background-repeat: no-repeat;
    background-position: center center;
    background-attachment: fixed;
    background-size: 100% 100%, auto;
}

    .btn-topic:hover {
        color: #aa3339;
        background: rgb(226 226 226 / 35%);
        background-repeat: no-repeat;
        background-position: center center;
        background-attachment: fixed;
        background-size: 100% 100%, auto;
    }


.btn-topic-2 {
    transition: all .5s ease;
    color: white;
    text-transform: uppercase;
    text-align: center;
    font-size: 17px;
    padding: 0.5rem 2rem;
    outline: none;
    border-radius: 2.5rem 0 0 2.5rem;
    border-color: #e48d2f;
    color: #e48d2f;
    background: rgb(255 255 255 / 35%);
    background-repeat: no-repeat;
    background-position: center center;
    background-attachment: fixed;
    background-size: 100% 100%, auto;
}

    .btn-topic-2:hover {
        /*margin-left: 1.5rem;*/
        color: white;
        background: linear-gradient(to bottom left, #aa3339, #ffb729);
        background: -webkit-linear-gradient(to bottom left, #aa3339, #ffb729);
        background: -moz-linear-gradient(to bottom left, #aa3339, #ffb729);
        background-repeat: no-repeat;
        background-position: center center;
        background-attachment: fixed;
        background-size: 100% 100%, auto;
    }


.bg-regist {
    transition: all .5s ease;
    color: white;
    text-transform: uppercase;
    text-align: center;
    font-size: 17px;
    padding: 0.25rem 2rem 0.25rem 1rem;
    outline: none;
    /*border-radius: 0 2.5rem 2.5rem 0;*/
    border-radius: 0 0.25rem 2.5rem 0;
    background: linear-gradient(to bottom left, #ffa50070, #ab3131);
    background: -webkit-linear-gradient(to bottom left, #ffa50070, #ab3131);
    background: -moz-linear-gradient(to bottom left, #ffa50070, #ab3131);
    background-repeat: no-repeat;
    background-position: center center;
    background-attachment: fixed;
    background-size: 100% 100%, auto;
    /*#ffffff, #8e5f1a*/
    /*#9a9a9a, #faaf2a*/
    /*#ffffff, #867358*/
    /*#ffa50070, #ab3131*/
}

.bg-regist_3 {
    transition: all .5s ease;
    color: white;
    text-transform: uppercase;
    text-align: center;
    font-size: 17px;
    padding: 0.25rem 2rem 0.25rem 1rem;
    outline: none;
    border-radius: 0 20px 20px 0;
    background: linear-gradient(to bottom left, #343434, #343434);
    background: -webkit-linear-gradient(to bottom left, #343434, #343434);
    background: -moz-linear-gradient(to bottom left, #343434, #343434);
    background-repeat: no-repeat;
    background-position: center center;
    background-attachment: fixed;
    background-size: 100% 100%, auto;
}

.bg-regist_2 {
    transition: all .5s ease;
    color: white;
    text-transform: uppercase;
    text-align: center;
    font-size: 17px;
    padding: 0.25rem 2rem 0.25rem 1rem;
    outline: none;
    border-radius:5px 5px 5px 5px;
    background: linear-gradient(to bottom left, #ffa50070, #ab3131);
    background: -webkit-linear-gradient(to bottom left, #ffa50070, #ab3131);
    background: -moz-linear-gradient(to bottom left, #ffa50070, #ab3131);
    background-repeat: no-repeat;
    background-position: center center;
    background-attachment: fixed;
    background-size: 100% 100%, auto;
}

.bg-regist_INS {
    transition: all .5s ease;
    color: white;
    text-transform: uppercase;
    text-align: center;
    font-size: 17px;
    padding: 0.25rem 2rem 0.25rem 1rem;
    outline: none;
    border-radius: 0 20px 20px 0;
    background: linear-gradient(to bottom left, #0099ff, #0099ff);
    background: -webkit-linear-gradient(to bottom left, #0099ff, #0099ff);
    background: -moz-linear-gradient(to bottom left, #0099ff, #0099ff);
    background-repeat: no-repeat;
    background-position: center center;
    background-attachment: fixed;
    background-size: 100% 100%, auto;   
}

.bg-regist_BR {
    transition: all .5s ease;
    color: white;
    text-transform: uppercase;
    text-align: center;
    font-size: 17px;
    padding: 0.25rem 2rem 0.25rem 1rem;
    outline: none;
    border-radius: 0 20px 20px 0;
    background: linear-gradient(to bottom left, #343434, #343434);
    background: -webkit-linear-gradient(to bottom left, #343434, #343434);
    background: -moz-linear-gradient(to bottom left, #343434, #343434);
    background-repeat: no-repeat;
    background-position: center center;
    background-attachment: fixed;
    background-size: 100% 100%, auto;
}

.bg-regist_MY {
    transition: all .5s ease;
    color: white;
    text-transform: uppercase;
    text-align: center;
    font-size: 17px;
    padding: 0.25rem 2rem 0.25rem 1rem;
    outline: none;
    border-radius: 0 20px 20px 0;
    background: linear-gradient(to bottom left, #e62e00, #e62e00);
    background: -webkit-linear-gradient(to bottom left, #e62e00, #e62e00);
    background: -moz-linear-gradient(to bottom left, #e62e00, #e62e00);
    background-repeat: no-repeat;
    background-position: center center;
    background-attachment: fixed;
    background-size: 100% 100%, auto;
}



.btn-logout {
    transition: all .5s ease;
    text-transform: uppercase;
    text-align: center;
    font-size: 17px;
    padding: 0.5rem 2rem;
    outline: none;
    border-radius: 2.5rem 0 0 2.5rem;
    border-color: #aa3339;
    margin-left: 1.5rem;
    color: DarkGray;
    background: rgba(255, 255, 255, 0.2);
    background-repeat: no-repeat;
    background-position: center center;
    background-attachment: fixed;
    background-size: 100% 100%, auto;
}

    .btn-logout:hover {
        color: white;
        background: linear-gradient(to bottom left, #d2d2d2, #bfbfbf);
        background: -webkit-linear-gradient(to bottom left, #d2d2d2, #bfbfbf);
        background: -moz-linear-gradient(to bottom left, #d2d2d2, #bfbfbf);
        background-repeat: no-repeat;
        background-position: center center;
        background-attachment: fixed;
        background-size: 100% 100%, auto;
    }

.btn-glass {
    background: rgba(255, 255, 255, 0.43);
    border-radius: 16px;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(6.6px);
    -webkit-backdrop-filter: blur(6.6px);
    border: 1px solid rgba(255, 255, 255, 0.24);
}