.text-shadow-gray{
    text-shadow: 1px 1px gray;
}
.text-gd-rain{
     background: -webkit-linear-gradient(#eee, #333);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.text-gd-metal{
    background: -webkit-linear-gradient(#ffeeee, #ddefbb);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.text-gd-skyline{
    background: -webkit-linear-gradient(#2B32B2, #1488CC);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.text-gd-joomla{
    background: -webkit-linear-gradient(#2a5298, #1e3c72);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.text-gd-sun-cloud{
    background: -webkit-linear-gradient(#fe8c00, #f83600);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.text-gd-fm{
    background: -webkit-linear-gradient(#0072ff, #00c6ff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.bg-gd-joomla{
    background: #1e3c72;  /* fallback for old browsers */
background: -webkit-linear-gradient(to right, #2a5298, #1e3c72);  /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, #2a5298, #1e3c72); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

}


.bg-gd-sun-cloud{
    background: #fe8c00;  /* fallback for old browsers */
background: -webkit-linear-gradient(to right, #f83600, #fe8c00);  /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, #f83600, #fe8c00); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

}
.bg-gd-fm{
    background: #00c6ff;  /* fallback for old browsers */
background: -webkit-linear-gradient(to right, #0072ff, #00c6ff);  /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, #0072ff, #00c6ff); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

}
.bg-gd-skyline{
    background: #1488CC;  /* fallback for old browsers */
background: -webkit-linear-gradient(to right, #2B32B2, #1488CC);  /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, #2B32B2, #1488CC); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

}
.bg-gd-azure{

    background-image: linear-gradient(120deg, #84fab0 0%, #8fd3f4 100%);
}
.bg-gd-azure-smile{
    background-image: radial-gradient(circle 248px at center, #16d9e3 0%, #30c7ec 47%, #46aef7 100%);
}
.bg-gd-cristal-river{
    background-image: linear-gradient(-225deg, #22E1FF 0%, #1D8FE1 48%, #625EB1 100%);
}
.bg-gd-bluelagoo{
  background: #0052D4;  /* fallback for old browsers */
background: -webkit-linear-gradient(to bottom, #6FB1FC, #4364F7, #0052D4);  /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to bottom, #6FB1FC, #4364F7, #0052D4); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

}
.bg-gd-martini{
    background: #FDFC47;  /* fallback for old browsers */
background: -webkit-linear-gradient(to right, #24FE41, #FDFC47);  /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, #24FE41, #FDFC47); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

}
.bg-gd-behongo{
    
background-image: linear-gradient(to right bottom, #05370e, #1d5215, #386e19, #578b1a, #7ba817);
}
.box-sh-sm{
    -webkit-box-shadow: -2px 7px 18px -6px rgba(0,0,0,0.75);
-moz-box-shadow: -2px 7px 18px -6px rgba(0,0,0,0.75);
box-shadow: -2px 7px 18px -6px rgba(0,0,0,0.75);
}
.br-5{
    border-radius: 5px;
}
.br-10{
    border-radius: 10px;
}
.btn-gd-lake {
    display: inline-block;
    text-align: center;
    vertical-align: middle;
    padding: 12px 24px;
    border: 1px solid #45a127;
    border-radius: 8px;
    background: #0c5700;
    background: -webkit-gradient(linear, left top, left bottom, from(#0c5700), to(#269945));
    background: -moz-linear-gradient(top, #0c5700, #269945);
    background: linear-gradient(to bottom, #0c5700, #269945);
    font: normal normal bold 20px arial;
    color: #ffffff;
    text-decoration: none;
}
.btn-gd-lake:hover,
.btn-gd-lake:focus {
    border: 1px solid #5ad133;
    background: #0e6800;
    background: -webkit-gradient(linear, left top, left bottom, from(#0e6800), to(#2eb853));
    background: -moz-linear-gradient(top, #0e6800, #2eb853);
    background: linear-gradient(to bottom, #0e6800, #2eb853);
    color: #ffffff;
    text-decoration: none;
}
.btn-gd-lake:active {
    background: #073400;
    background: -webkit-gradient(linear, left top, left bottom, from(#073400), to(#269945));
    background: -moz-linear-gradient(top, #073400, #269945);
    background: linear-gradient(to bottom, #073400, #269945);
}
.pt-60{
    padding-top: 60px;
}



.btn-gd-primary {
    display: inline-block;
    text-align: center;
    vertical-align: middle;
    padding: 12px 24px;
    border: 1px solid #18609f;
    border-radius: 9px;
    background: #279cff;
    background: -webkit-gradient(linear, left top, left bottom, from(#279cff), to(#00294d));
    background: -moz-linear-gradient(top, #279cff, #00294d);
    background: linear-gradient(to bottom, #279cff, #00294d);
    text-shadow: #0f3c64 1px 1px 7px;
    font: normal normal bold 20px arial;
    color: #ffffff;
    text-decoration: none;
}
.btn-gd-primary:hover,
.btn-gd-primary:focus {
    border: 1px solid #1e78c7;
    background: #2fbbff;
    background: -webkit-gradient(linear, left top, left bottom, from(#2fbbff), to(#00315c));
    background: -moz-linear-gradient(top, #2fbbff, #00315c);
    background: linear-gradient(to bottom, #2fbbff, #00315c);
    color: #ffffff;
    text-decoration: none;
}
.btn-gd-primary:active {
    background: #18609f;
    background: -webkit-gradient(linear, left top, left bottom, from(#18609f), to(#00294d));
    background: -moz-linear-gradient(top, #18609f, #00294d);
    background: linear-gradient(to bottom, #18609f, #00294d);
}


.btn-gd-danger {
    display: inline-block;
    text-align: center;
    vertical-align: middle;
    padding: 12px 24px;
    border: 1px solid #706a6a;
    border-radius: 9px;
    background: #ff3030;
    background: -webkit-gradient(linear, left top, left bottom, from(#ff3030), to(#450000));
    background: -moz-linear-gradient(top, #ff3030, #450000);
    background: linear-gradient(to bottom, #ff3030, #450000);
    text-shadow: #000000 1px 1px 7px;
    font: normal normal bold 20px arial;
    color: #ffffff;
    text-decoration: none;
}
.btn-gd-danger:hover,
.btn-gd-danger:focus {
    border: 1px solid #928a8a;
    background: #ff3a3a;
    background: -webkit-gradient(linear, left top, left bottom, from(#ff3a3a), to(#530000));
    background: -moz-linear-gradient(top, #ff3a3a, #530000);
    background: linear-gradient(to bottom, #ff3a3a, #530000);
    color: #ffffff;
    text-decoration: none;
}
.btn-gd-danger:active {
    background: #a91a1a;
    background: -webkit-gradient(linear, left top, left bottom, from(#a91a1a), to(#450000));
    background: -moz-linear-gradient(top, #a91a1a, #450000);
    background: linear-gradient(to bottom, #a91a1a, #450000);
}
.btn-gd-success {
    display: inline-block;
    text-align: center;
    vertical-align: middle;
    padding: 12px 24px;
    border: 1px solid #459f18;
    border-radius: 9px;
    background: #70ff27;
    background: -webkit-gradient(linear, left top, left bottom, from(#70ff27), to(#287800));
    background: -moz-linear-gradient(top, #70ff27, #287800);
    background: linear-gradient(to bottom, #70ff27, #287800);
    text-shadow: #2b640f 1px 1px 7px;
    font: normal normal bold 20px arial;
    color: #ffffff;
    text-decoration: none;
}
.btn-gd-success:hover,
.btn-gd-success:focus {
    border: 1px solid #56c71e;
    background: #86ff2f;
    background: -webkit-gradient(linear, left top, left bottom, from(#86ff2f), to(#309000));
    background: -moz-linear-gradient(top, #86ff2f, #309000);
    background: linear-gradient(to bottom, #86ff2f, #309000);
    color: #ffffff;
    text-decoration: none;
}
.btn-gd-success:active {
    background: #459f18;
    background: -webkit-gradient(linear, left top, left bottom, from(#459f18), to(#287800));
    background: -moz-linear-gradient(top, #459f18, #287800);
    background: linear-gradient(to bottom, #459f18, #287800);
}

.btn-gd-warning {
    display: inline-block;
    text-align: center;
    vertical-align: middle;
    padding: 12px 24px;
    border: 1px solid #8b8215;
    border-radius: 9px;
    background: #f5e100;
    background: -webkit-gradient(linear, left top, left bottom, from(#f5e100), to(#777a12));
    background: -moz-linear-gradient(top, #f5e100, #777a12);
    background: linear-gradient(to bottom, #f5e100, #777a12);
    text-shadow: #645d0f 1px 1px 7px;
    font: normal normal bold 20px arial;
    color: #ffffff;
    text-decoration: none;
}
.btn-gd-warning:hover,
.btn-gd-warning:focus {
    border: 1px solid #c7b91e;
    background: #ffff00;
    background: -webkit-gradient(linear, left top, left bottom, from(#ffff00), to(#8f9216));
    background: -moz-linear-gradient(top, #ffff00, #8f9216);
    background: linear-gradient(to bottom, #ffff00, #8f9216);
    color: #ffffff;
    text-decoration: none;
}
.btn-gd-warning:active {
    background: #938700;
    background: -webkit-gradient(linear, left top, left bottom, from(#938700), to(#777a12));
    background: -moz-linear-gradient(top, #938700, #777a12);
    background: linear-gradient(to bottom, #938700, #777a12);
}

.bg-gd-dusk {
    background: #EC34D8;
    background: linear-gradient(135deg, #EC34D8 0, #1152F7 100%)!important
}

/*.bg-gd-button {
    border-radius: 5px;
    background: #1152F7;
    background: linear-gradient(35deg, darkmagenta 0, #FFFFFF 100%)!important
}*/

/*.bg-gd-button:hover {
    border-radius: 5px;
    background: #FFFFFF;
    background: linear-gradient(35deg, darkred 0, #1152F7 100%)!important;
    cursor: pointer;
}*/

.cKKey{
    /* background styles */
    position: relative;
    display: inline-block;
    padding: 15px 25px;
    background-color: blue; /*for compatibility with older browsers*/
    background-image: linear-gradient(blue,lightblue);

    /* text styles */
    text-decoration: none;
    color: #fff;
    font-size: 25px;
    font-family: sans-serif;
    font-weight: 100;
}

.cKKey:after{
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: calc(100% - 4px);
    height: 50%;
    background: linear-gradient(rgba(255,255,255,0.8), rgba(255,255,255,0.2));
}

.cKKey:hover{
    border-radius: 3px;
    box-shadow: 0px 1px 4px -2px #333;
    text-shadow: 0px -1px #333;
    background: linear-gradient(#073,#0fa);
}

/* loading transparent */
#cover-spin {
    position:fixed;
    width:100%;
    left:0;right:0;top:0;bottom:0;
    background-color: rgba(255,255,255,0.7);
    z-index:999999999999;
    display:none;
}

@-webkit-keyframes spin {
    from {-webkit-transform:rotate(0deg);}
    to {-webkit-transform:rotate(360deg);}
}

@keyframes spin {
    from {transform:rotate(0deg);}
    to {transform:rotate(360deg);}
}

#cover-spin::after {
    content:'';
    display:block;
    position:absolute;
    left:48%;top:40%;
    width:40px;height:40px;
    border-style:solid;
    border-color:black;
    border-top-color:transparent;
    border-width: 4px;
    border-radius:50%;
    -webkit-animation: spin .8s linear infinite;
    animation: spin .8s linear infinite;
}

.ck-editor__editable {
  min-height: 150px;
}

body {
  --ck-z-default: 100;
  --ck-z-modal: calc( var(--ck-z-default) + 999);
}
.document-editor__toolbar {
    /* Make sure the toolbar container is always above the editable. */
    z-index: 1;

    /* Create the illusion of the toolbar floating over the editable. */
    box-shadow: 0 0 5px hsla( 0,0%,0%,.2 );

    /* Use the CKEditor CSS variables to keep the UI consistent. */
    border-bottom: 1px solid var(--ck-color-toolbar-border);
}

/* Adjust the look of the toolbar inside the container. */
.document-editor__toolbar .ck-toolbar {
    border: 0;
    border-radius: 0;
}

/* Make the editable container look like the inside of a native word processor application. */
.document-editor__editable-container {
    padding: calc( 2 * var(--ck-spacing-large) );
    background: var(--ck-color-base-foreground);

    /* Make it possible to scroll the "page" of the edited content. */
    overflow-y: scroll;
}

.document-editor__editable-container .ck-editor__editable {
    /* Set the dimensions of the "page". */
    width: 15.8cm;
    min-height: 21cm;

    /* Keep the "page" off the boundaries of the container. */
    padding: 1cm 2cm 2cm;

    border: 1px hsl( 0,0%,82.7% ) solid;
    border-radius: var(--ck-border-radius);
    background: white;

    /* The "page" should cast a slight shadow (3D illusion). */
    box-shadow: 0 0 5px hsla( 0,0%,0%,.1 );

    /* Center the "page". */
    margin: 0 auto;
}
/* Set the default font for the "page" of the content. */
.document-editor .ck-content,
.document-editor .ck-heading-dropdown .ck-list .ck-button__label {
    font: 16px/1.6 "Helvetica Neue", Helvetica, Arial, sans-serif;
}
/* Adjust the headings dropdown to host some larger heading styles. */
.document-editor .ck-heading-dropdown .ck-list .ck-button__label {
    line-height: calc( 1.7 * var(--ck-line-height-base) * var(--ck-font-size-base) );
    min-width: 6em;
}

/* Scale down all heading previews because they are way too big to be presented in the UI.
Preserve the relative scale, though. */
.document-editor .ck-heading-dropdown .ck-list .ck-button:not(.ck-heading_paragraph) .ck-button__label {
    transform: scale(0.8);
    transform-origin: left;
}

/* Set the styles for "Heading 1". */
.document-editor .ck-content h2,
.document-editor .ck-heading-dropdown .ck-heading_heading1 .ck-button__label {
    font-size: 2.18em;
    font-weight: normal;
}

.document-editor .ck-content h2 {
    line-height: 1.37em;
    padding-top: .342em;
    margin-bottom: .142em;
}

/* Set the styles for "Heading 2". */
.document-editor .ck-content h3,
.document-editor .ck-heading-dropdown .ck-heading_heading2 .ck-button__label {
    font-size: 1.75em;
    font-weight: normal;
    color: hsl( 203, 100%, 50% );
}

.document-editor .ck-heading-dropdown .ck-heading_heading2.ck-on .ck-button__label {
    color: var(--ck-color-list-button-on-text);
}

/* Set the styles for "Heading 2". */
.document-editor .ck-content h3 {
    line-height: 1.86em;
    padding-top: .171em;
    margin-bottom: .357em;
}

/* Set the styles for "Heading 3". */
.document-editor .ck-content h4,
.document-editor .ck-heading-dropdown .ck-heading_heading3 .ck-button__label {
    font-size: 1.31em;
    font-weight: bold;
}

.document-editor .ck-content h4 {
    line-height: 1.24em;
    padding-top: .286em;
    margin-bottom: .952em;
}

/* Set the styles for "Paragraph". */
.document-editor .ck-content p {
    font-size: 1em;
    line-height: 1.63em;
    padding-top: .5em;
    margin-bottom: 1.13em;
}
/* Make the block quoted text serif with some additional spacing. */
.document-editor .ck-content blockquote {
    font-family: Georgia, serif;
    margin-left: calc( 2 * var(--ck-spacing-large) );
    margin-right: calc( 2 * var(--ck-spacing-large) );
}